<template>
	<view class="content flex-align-center">
		<view class="left-content">
			<view class="calendar-box">
				<zengCalen :actDay="actDay" :headerBar="true" :chooseDay="chooseDay" @onDayClick='onDayClick'>
				</zengCalen>
			</view>
			<view class="total-info  ">
				<view class="date-time flex-center">
					2024年8月27日
				</view>
				<view class="flex-between" style="margin-top: 39rpx;">
					<view class="total-info-item flex-center">
						<view class="total-info-item-text" style="color: #2239E9;">
							02:09
						</view>
						<view class="" style="margin-top: 15rpx;">
							总有效时长
						</view>
					</view>
					<view class="total-info-item flex-center">
						<view class="total-info-item-text" style="color: #2239E9;">
							02:09
						</view>
						<view style="margin-top: 15rpx;">
							总有效时长
						</view>
					</view>
					<view class="total-info-item flex-center">
						<view class="total-info-item-text" style="color: #088C18;">
							87%
						</view>
						<view style="margin-top: 15rpx;">
							总效率
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="right-content">
			<view class="right-content-item flex-align-center">
				<view class="title flex-center">
					<span>单</span>
					<span>词</span>
				</view>
				<view class="charts-list flex-align-center">
					<view class="charts-list-item flex-align-center">
						<span>记忆用时</span>
						<view class="rate-box-chart">
							<qiun-data-charts type="arcbar" :opts="opts" :chartData="Arcbar1" />
						</view>
						<view class="flex-center">
							<view class="flex-center" style="flex-direction: column;">
								<view class="">
									00:00
								</view>
								<view class="color-716E6E">
									有效
								</view>
							</view>
							<view class="line"></view>
							<view class="flex-center" style="flex-direction: column;">
								<view class="">
									00:00
								</view>
								<view class="color-716E6E">
									在线
								</view>
							</view>
						</view>
					</view>
					<view class="charts-list-item flex-align-center">
						<span>记忆数量</span>
						<view class="rate-box-chart flex-center">
							<image class="rate-box" src="../../../../static/images/common/kong.png"></image>
						</view>

						<view class="flex-center">
							<view class="flex-center" style="flex-direction: column;">
								<view class="">
									00:00
								</view>
								<view class="color-716E6E">
									有效
								</view>
							</view>
							<view class="line"></view>
							<view class="flex-center" style="flex-direction: column;">
								<view class="">
									00:00
								</view>
								<view class="color-716E6E">
									在线
								</view>
							</view>
						</view>
					</view>
					<view class="charts-list-item flex-align-center">
						<span>记忆速度</span>
						<view class="rate-box-chart flex-center">
							<image class="rate-box" src="../../../../static/images/common/kong.png"></image>
						</view>
					</view>
				</view>
				<view class="total-time">
					<view class="total-time-item flex-center">
						<span>单词总用时</span>
						<view class="flex-center">
							<view class="flex-center" style="flex-direction: column;">
								<view class="">
									00:00
								</view>
								<view class="color-716E6E">
									有效
								</view>
							</view>
							<view class="line"></view>
							<view class="flex-center" style="flex-direction: column;">
								<view class="">
									00:00
								</view>
								<view class="color-716E6E">
									在线
								</view>
							</view>
							<view class="line"></view>
							<view class="flex-center" style="flex-direction: column;">
								<view class="color-50A056">
									83%
								</view>
								<view class="color-716E6E">
									效率
								</view>
							</view>
						</view>
					</view>
					<view class="total-time-item flex-center" style="margin-top: 10rpx;">
						<span>测试用时</span>
						<view class="flex-center">
							<view class="flex-center" style="flex-direction: column;">
								<view class="">
									00:00
								</view>
								<view class="color-716E6E">
									有效
								</view>
							</view>
							<view class="line"></view>
							<view class="flex-center" style="flex-direction: column;">
								<view class="">
									00:00
								</view>
								<view class="color-716E6E">
									在线
								</view>
							</view>
							<view class="line"></view>
							<view class="flex-center" style="flex-direction: column;">
								<view class="color-50A056">
									83%
								</view>
								<view class="color-716E6E">
									效率
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="right-content-item flex-align-center">
				<view class="title flex-center">
					<span>例</span>
					<span>句</span>
				</view>
				<view class="charts-list flex-align-center">
					<view class="charts-list-item flex-align-center">
						<span>记忆用时</span>
						<view class="rate-box-chart flex-center">
							<image class="rate-box" src="../../../../static/images/common/kong.png"></image>
						</view>
						<view class="flex-center">
							<view class="flex-center" style="flex-direction: column;">
								<view class="">
									00:00
								</view>
								<view class="color-716E6E">
									有效
								</view>
							</view>
							<view class="line"></view>
							<view class="flex-center" style="flex-direction: column;">
								<view class="">
									00:00
								</view>
								<view class="color-716E6E">
									在线
								</view>
							</view>
						</view>
					</view>
					<view class="charts-list-item flex-align-center">
						<span>记忆数量</span>
						<view class="rate-box-chart flex-center">
							<image class="rate-box" src="../../../../static/images/common/kong.png"></image>
						</view>
						<view class="flex-center">
							<view class="flex-center" style="flex-direction: column;">
								<view class="">
									00:00
								</view>
								<view class="color-716E6E">
									有效
								</view>
							</view>
							<view class="line"></view>
							<view class="flex-center" style="flex-direction: column;">
								<view class="">
									00:00
								</view>
								<view class="color-716E6E">
									在线
								</view>
							</view>
						</view>
					</view>
					<view class="charts-list-item flex-align-center">
						<span>记忆速度</span>
						<view class="rate-box-chart flex-center">
							<image class="rate-box" src="../../../../static/images/common/kong.png"></image>
						</view>
					</view>
				</view>
				<view class="total-time">
					<view class="total-time-item flex-center">
						<span>例句总用时</span>
						<view class="flex-center">
							<view class="flex-center" style="flex-direction: column;">
								<view class="">
									00:00
								</view>
								<view class="color-716E6E">
									有效
								</view>
							</view>
							<view class="line"></view>
							<view class="flex-center" style="flex-direction: column;">
								<view class="">
									00:00
								</view>
								<view class="color-716E6E">
									在线
								</view>
							</view>
							<view class="line"></view>
							<view class="flex-center" style="flex-direction: column;">
								<view class="color-50A056">
									83%
								</view>
								<view class="color-716E6E">
									效率
								</view>
							</view>
						</view>
					</view>
					<view class="total-time-item flex-center" style="margin-top: 10rpx;">
						<span>测试用时</span>
						<view class="flex-center">
							<view class="flex-center" style="flex-direction: column;">
								<view class="">
									00:00
								</view>
								<view class="color-716E6E">
									有效
								</view>
							</view>
							<view class="line"></view>
							<view class="flex-center" style="flex-direction: column;">
								<view class="">
									00:00
								</view>
								<view class="color-716E6E">
									在线
								</view>
							</view>
							<view class="line"></view>
							<view class="flex-center" style="flex-direction: column;">
								<view class="color-50A056">
									83%
								</view>
								<view class="color-716E6E">
									效率
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="right-content-item flex-align-center">
				<view class="title flex-center">
					<span>句</span>
					<span>子</span>
				</view>
				<view class="charts-list flex-align-center">
					<view class="charts-list-item flex-align-center">
						<span>记忆用时</span>
						<view class="rate-box-chart flex-center">
							<image class="rate-box" src="../../../../static/images/common/kong.png"></image>
						</view>
						<view class="flex-center">
							<view class="flex-center" style="flex-direction: column;">
								<view class="">
									00:00
								</view>
								<view class="color-716E6E">
									有效
								</view>
							</view>
							<view class="line"></view>
							<view class="flex-center" style="flex-direction: column;">
								<view class="">
									00:00
								</view>
								<view class="color-716E6E">
									在线
								</view>
							</view>
						</view>
					</view>
					<view class="charts-list-item flex-align-center">
						<span>记忆数量</span>
						<view class="rate-box-chart flex-center">
							<image class="rate-box" src="../../../../static/images/common/kong.png"></image>
						</view>
						<view class="flex-center">
							<view class="flex-center" style="flex-direction: column;">
								<view class="">
									00:00
								</view>
								<view class="color-716E6E">
									有效
								</view>
							</view>
							<view class="line"></view>
							<view class="flex-center" style="flex-direction: column;">
								<view class="">
									00:00
								</view>
								<view class="color-716E6E">
									在线
								</view>
							</view>
						</view>
					</view>
					<view class="charts-list-item flex-align-center">
						<span>记忆速度</span>
						<view class="rate-box-chart flex-center">
							<image class="rate-box" src="../../../../static/images/common/kong.png"></image>
						</view>
					</view>
				</view>
				<view class="total-time">
					<view class="total-time-item flex-center">
						<span>句子总用时</span>
						<view class="flex-center">
							<view class="flex-center" style="flex-direction: column;">
								<view class="">
									00:00
								</view>
								<view class="color-716E6E">
									有效
								</view>
							</view>
							<view class="line"></view>
							<view class="flex-center" style="flex-direction: column;">
								<view class="">
									00:00
								</view>
								<view class="color-716E6E">
									在线
								</view>
							</view>
							<view class="line"></view>
							<view class="flex-center" style="flex-direction: column;">
								<view class="color-50A056">
									83%
								</view>
								<view class="color-716E6E">
									效率
								</view>
							</view>
						</view>
					</view>
					<view class="total-time-item flex-center" style="margin-top: 10rpx;">
						<span>测试用时</span>
						<view class="flex-center">
							<view class="flex-center" style="flex-direction: column;">
								<view class="">
									00:00
								</view>
								<view class="color-716E6E">
									有效
								</view>
							</view>
							<view class="line"></view>
							<view class="flex-center" style="flex-direction: column;">
								<view class="">
									00:00
								</view>
								<view class="color-716E6E">
									在线
								</view>
							</view>
							<view class="line"></view>
							<view class="flex-center" style="flex-direction: column;">
								<view class="color-50A056">
									83%
								</view>
								<view class="color-716E6E">
									效率
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="right-content-bottom  ">
				<view class="flex-align-center">
					<span class="lable">扩展学习:</span>
					<span>有效时长：00:00</span>
					<span>在线时长: 00:11</span>
					<span class="flex-align-center">效率 : <view class="color-50A056" style="margin-left: 8rpx;">96%
						</view></span>
				</view>
				<view class="flex-align-center">
					<span class="lable">其他:</span>
					<span>有效时长：00:00</span>
					<span>在线时长: 00:11</span>
					<span class="flex-align-center">效率 : <view class="color-50A056" style="margin-left: 8rpx;">96%
						</view></span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import zengCalen from '@/components/zeng-calen/components/zeng-calen/zeng-calen.vue'
	export default {
		components: {
			zengCalen,

		},
		data() {
			return {
				"Arcbar1": {
					"series": [{
						"name": "正确率",
						"data": 0.8,
						"color": "#FF0000"
					}]
				},
				opts: {
					color: ["#1890FF", "#23a0c2", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [0, 0, 0, 0],
					title: {
						name: "80%",
						fontSize: 12,
						color: "#FF0000"
					},
					subtitle: {
						name: "效率",
						fontSize: 10,
						color: "#716E6E"
					},
					extra: {
						arcbar: {
							type: "circle",
							width: 8,
							backgroundColor: "#E9E9E9",
							startAngle: 1.5,
							endAngle: 0.25,
							gap: 2
						}
					}
				},
				actDay: [

				], //用户选择的日期
				chooseDay: ["2024-09-05"], //已被标记的数据
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	@function px_2_vw($px) {
		@return #{$px * 100 / 1920}vw;
	}

	.color-716E6E {
		color: #716E6E;
	}

	.color-50A056 {
		color: #50A056;
	}

	.content {
		width: 100%;
		height: 100%;
		// background: #fff;


		// padding: 57rpx 50rpx;

		.left-content {
			width: px_2_vw(650);
			height: 100%;
			background: #fff;
			border-radius: 65rpx 0 0 65rpx;

			.calendar-box {
				width: 100%;
				height: 75%;
				// border: 1rpx solid #000;
			}

			.total-info {
				width: 100%;
				background: #D9D9D9;
				height: 25%;
				border-radius: 0rpx 0 0rpx 65rpx;
				flex-direction: column;
				padding: 0 60rpx;

				.date-time {
					width: px_2_vw(321);
					height: px_2_vw(63);
					font-size: px_2_vw(36);
					border-radius: 0px 0px 30rpx 30rpx;
					background: rgba(115, 122, 238, 0.3);
					font-weight: 500;
					margin: 0 auto;
				}

				.total-info-item {
					flex-direction: column;

					.total-info-item-text {
						font-size: px_2_vw(36);
					}
				}
			}
		}

		.right-content {
			width: px_2_vw(1163);
			height: 100%;
			background: #7B84F8;
			border-radius: 0 65rpx 65rpx 0;
			padding: 23rpx 0rpx 23rpx 24rpx;

			.right-content-item {
				margin-bottom: 10rpx;
				background: #C5C5C5;
				border-radius: 34rpx;
				width: px_2_vw(1089);
				height: 28%;
				padding: 15rpx 0;
				padding-right: 56rpx;

				.charts-list {
					height: 100%;
				}

				.charts-list-item {
					width: px_2_vw(200);
					height: 100%;
					margin-right: 20rpx;
					background: #fff;
					border-radius: 24rpx;
					flex-direction: column;
					color: #36475C;
					font-size: px_2_vw(18);
					padding-top: 16rpx;
				}

				.rate-box-chart {
					width: px_2_vw(173);
					height: px_2_vw(120);
				}

				.rate-box {
					width: px_2_vw(89);
					height: px_2_vw(89);
					// border: 1rpx solid #000;
					// background-image: url('../../../../static/images/common/kong.png');
					// background-size: 100% 100%;
					margin-top: 8rpx;

				}

				.line {
					width: 1rpx;
					height: px_2_vw(29);
					border-left: 1rpx solid #000;
					margin: 0 19rpx;
				}

				.total-time {
					height: 100%;

					.total-time-item {
						height: 50%;
						width: px_2_vw(300);
						border-radius: 24rpx;
						background: #fff;
						flex-direction: column;
						font-size: px_2_vw(20);
					}
				}

				.title {
					width: px_2_vw(62);
					height: px_2_vw(142);
					background: #9CA1EF;
					border-radius: 0px 30rpx 30rpx 0px;
					flex-direction: column;
					font-size: px_2_vw(30);
					margin-right: 48rpx;
					font-weight: 600;


				}
			}

			.right-content-bottom {
				width: px_2_vw(1089);
				height: 12%;
				background: #C5C5C5;
				border-radius: 34rpx;
				padding: 13rpx 55rpx;
				font-size: px_2_vw(23);
				color: #36475C;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.lable {
					width: px_2_vw(100);
					text-align: right;
					margin-right: 37rpx;
				}

				span {
					width: px_2_vw(262);
				}
			}
		}

	}

	::v-deep .content .calendar-wrapper {
		border-radius: 65rpx !important;
	}
</style>